
// /*************************展示班级统计数据****************************/
// 把代码写在立即执行函数中 或者页面加载事件中(load事件和DomContentLoaded事件)
// load事件是当页面中所有的资源都加载完毕就触发
// DomContentLoaded事件是当页面中的html标签结构加载完毕就触发
document.addEventListener('DOMContentLoaded', async function () {
  // 1. 调接口获取概览数据
  // 默认情况axios请求的结果是套壳对象，套壳对象.data才是服务器响应回来的数据
    // const res = await axios.get('/dashboard'，配置对象)
    const res = await axios.get('/dashboard')
  console.log('请求拿到的结果--不是套壳对象了，而是具体的数据-统计数据',res)
  // 把概览数据从统计数据中结构出来
  const { overview } = res.data
  console.log('概览数据',overview);
    // 2. 渲染概览数据到页面
  /*
    思路一：获取标签，然都给标签设置内容（后期数据变化了，js代码还需要修改）
    思路二：遍历概览数据（对象），根据数据获取对应的标签，设置其内容
  */
  for (let k in overview){
    // k ---> 对象的属性名，overview[k]--->对象的属性值
    console.log(k, overview[k])
    // 获取span---属性名和span和name的值一致的！---属性选择器
    const span = document.querySelector(`[name=${k}]`)
    span.innerHTML = overview[k]
  }
  /**************************渲染全学年的薪资走势（折线图）*******************/
  initYear(res.data.year)
  /**************************渲染班级薪资分布图表（饼图）*******************/
  initSalary(res.data.salaryData)
  /**************************小组薪资情况（柱状图）*******************/
  initGroup(res.data.groupData)
  /***************************男女薪资分布************************************************ */
  initGender(res.data.salaryData)
  /****************************籍贯分布********************************************* */
  initMapChart(res.data.provinceData)
  })
  // 全年薪资走势
function initYear(year) {
  // 创建echarts实例
  const myChart = echarts.init(document.querySelector('#line'))
  // 准备配置项
  const option = {
    // 标题
    title: {
      text: '2022全学科薪资走势',
      textStyle: {
        fontSize: 16
      },
      left: 10,
      top: 15
    },
    xAxis: {
      type: 'category',
      // data: ['1月', '2月', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      data:year.map(item=>item.month),
      // 轴线
      axisLine: {
        lineStyle: {
          type: 'dashed',
          color: '#ccc'
        }
      },
      // 刻度标签
      axisLabel: {
        color: '#666'
      }
    },
    yAxis: {
      type: 'value',
      // 分隔线
      splitLine: {
        lineStyle: {
          color: '#ccc',
          type: 'dashed'
        }
      }
    },
    // 提示框
    tooltip: {
      trigger: 'axis'
    },
    // 网格
    grid: {
      left: '8%',
      top: '15%'
    },
    color: [
      {
        type: 'linear',
        x: 0,
        y: 0,
        x2: 1,
        y2: 1,
        colorStops: [
          {
            offset: 0,
            color: '#4a9dee' // 0% 处的颜色
          },
          {
            offset: 1,
            color: '#5b78ef' // 100% 处的颜色
          }
        ],
        global: false // 缺省为 false
      }
    ],
    series: [
      {
        // data: [820, 932, 901, 934, 1290, 1330, 1320],
      data:year.map(item=>item.salary),
        type: 'line',
        smooth: true,
        // 区域填充
        areaStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: '#8ebcf4' // 0% 处的颜色
              },
              {
                offset: 0.8,
                color: 'rgba(255,255,255,0.2)' // 0% 处的颜色
              },
              {
                offset: 1,
                color: '#fff' // 100% 处的颜色
              }
            ],
            global: false // 缺省为 false
          }
        },
        // 标记
        symbolSize: 10,
        // 线的样式
        lineStyle: {
          width: 5
        }
      }
    ]
  };
  
  // 设置配置项
  myChart.setOption(option)
}
  // 班级薪资分布图表
function initSalary(salary) {
  // 1. 创建echarts实例
  const myChart = echarts.init(document.querySelector('#salary'))
  // 2. 准备配置项
  const option = {
    // 标题
    title: {
      text: '班级薪资分布',
      left: 10,
      top: 15,
      textStyle: {
        fontSize: 16
      }
    },
    tooltip: {
      trigger: 'item'
    },
    legend: {
      bottom: '5%',
      left: 'center'
    },
    color:['#fda224', '#5097ff', '#3abcfa', '#34d39a'],
    series: [
      {
        name: '班级薪资分布',
        type: 'pie',
        // 圆的半径
        radius: ['50%', '65%'],
        // 圆心点
        center:['50%', '50%'],
        avoidLabelOverlap: false,
        // 每一块饼的样式
        itemStyle: {
          borderRadius: 10,
          borderColor: '#fff',
          borderWidth: 2
        },
        // 文字
        label: {
          show: false,
          position: 'center'
        },
        // 高亮样式
        // emphasis: {
        //   label: {
        //     show: true,
        //     fontSize: 40,
        //     fontWeight: 'bold'
        //   }
        // },
        // 文字和饼的连接线
        labelLine: {
          show: false
        },
        // data: [
        //   { value: 1048, name: 'Search Engine' },
        //   { value: 735, name: 'Direct' },
        //   { value: 580, name: 'Email' },
        //   { value: 484, name: 'Union Ads' },
        // ]
        // data: 数组(每个元素都是对象，对象都有value和name属性)
        data: salary.map(item => {
          return{value:item.g_count+ item.b_count,name:item.label}
        })
      }
    ]
  };
  
  // 3. 设置配置项
  myChart.setOption(option)
}
  // 小组薪资情况
  function initGroup(groupData) {
    // 1. 创建echarts实例
    const myChart = echarts.init(document.querySelector('#lines'))
    // 2. 准备配置项
    const option = {
      xAxis: {
        type: 'category',
        // data: ['1月', '2月', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        // 默认放第一小组成员的名字 
        data:groupData[1].map(item=>item.name),// const obj = {name:'list'} obj.name 和obj['name']
        // 轴线
        axisLine: {
          lineStyle: {
            type: 'dashed',
            color: '#ccc'
          }
        },
        // 刻度标签
        axisLabel: {
          color: '#666'
        }
      },
      yAxis: {
        type: 'value',
        // 分隔线
        splitLine: {
          lineStyle: {
            color: '#ccc',
            type: 'dashed'
          }
        }
      },
      grid: {
        left: 50,
        top: 30,
        right: 30,
        bottom: 40
      },
      color: [
        {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: '#3cd59e' // 0% 处的颜色
            },
            {
              offset: 1,
              color: 'rgba(61, 213, 159, 0.1)' // 100% 处的颜色
            }
          ],
          global: false // 缺省为 false
        },
        {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: '#50a3ef' // 0% 处的颜色
            },
            {
              offset: 1,
              color: 'rgba(80, 163, 239, 0.1)' // 100% 处的颜色
            }
          ],
          global: false // 缺省为 false
        }
      ],
      tooltip: {
        trigger:'item'
      },
      series: [
        {
          name: '期望薪资',
          // data: [120, 200, 150, 80, 70, 110, 130],
          data:groupData[1].map(item=>item.hope_salary),
          type: 'bar'
        },
        {
          name: '实际薪资',
          data:groupData[1].map(item=>item.salary),
          type: 'bar'
        }
      ]
    };
    // 3. 设置配置项
    myChart.setOption(option)
    /******************单击按钮，切换小组数据***************************/
// 1. 注册单击事件
const btns = document.querySelector('#btns')
btns.addEventListener('click', function (e) {
  if (e.target.tagName === 'BUTTON') {
    console.log('单机了组号')
    // 2. 排他
    document.querySelector('.btn-blue').classList.remove('btn-blue')
    e.target.classList.add('btn-blue')
    // 3. 获取小组的数据
    const n = e.target.innerHTML
    console.log(n)
    console.log(groupData[n])
    // 4. 更改option中的数据
    option.xAxis.data = groupData[n].map(item=>item.name)
    option.series[0].data = groupData[n].map(item=>item.hope_salary)
    option.series[1].data = groupData[n].map(item=>item.salary)
    // 5. 重新设置配置项
    myChart.setOption(option)
  }
})
}
  // 男女薪资分布
const initGender = (salaryData) => {
  // 创建echarts实例
    const myChart = echarts.init(document.querySelector('#gender'))
    //准备配置项
  const option = {
    title: [
      {
        text: '男女薪资分布',
        left: 10,
        top: 15,
        textStyle: {
          fontSize: 16
        }
      },
      {
        text: '男生',
        left: 'center',
        top: '48%',
        textStyle: {
          fontSize: 14
        }
      },
      {
        text: '女生',
        left: 'center',
        top: '88%',
        textStyle: {
          fontSize: 14
        }
      }
    ],
    tooltip: {
      trigger: 'item'
    },
    color: ['#fda224', '#5097ff', '#3abcfa', '#34d39a'],
    series: [
      {
        name: '男生',
        type: 'pie',
        radius: ['25%', '35%'],
        center: ['50%', '30%'],
        // data: [
        //   { value: 1048, name: 'Search Engine' },
        //   { value: 735, name: 'Direct' },
        //   { value: 580, name: 'Email' },
        //   { value: 484, name: 'Union Ads' }
        // ]
        data: salaryData.map(item => {
          return{value:item.b_count,name:item.label}
        })
      },
      {
        name: '女生',
        type: 'pie',
        radius: ['25%', '35%'],
        center: ['50%', '70%'],
        // data: [
        //   { value: 1048, name: 'Search Engine' },
        //   { value: 735, name: 'Direct' },
        //   { value: 580, name: 'Email' },
        //   { value: 484, name: 'Union Ads' }
        // ]
        data: salaryData.map(item => {
          return {value:item.g_count,name:item.label}
        })
      }
    ]
  };  
  // 设置配置项
  myChart.setOption(option)
  }
 // 籍贯分布
 const initMapChart = (provinceData) => {
  const myEchart = echarts.init(document.querySelector('#map'))
  const dataList = [
    { name: '南海诸岛', value: 0 },
    { name: '北京', value: 0 },
    { name: '天津', value: 0 },
    { name: '上海', value: 0 },
    { name: '重庆', value: 0 },
    { name: '河北', value: 0 },
    { name: '河南', value: 0 },
    { name: '云南', value: 0 },
    { name: '辽宁', value: 0 },
    { name: '黑龙江', value: 0 },
    { name: '湖南', value: 0 },
    { name: '安徽', value: 0 },
    { name: '山东', value: 0 },
    { name: '新疆', value: 0 },
    { name: '江苏', value: 0 },
    { name: '浙江', value: 0 },
    { name: '江西', value: 0 },
    { name: '湖北', value: 0 },
    { name: '广西', value: 0 },
    { name: '甘肃', value: 0 },
    { name: '山西', value: 0 },
    { name: '内蒙古', value: 0 },
    { name: '陕西', value: 0 },
    { name: '吉林', value: 0 },
    { name: '福建', value: 0 },
    { name: '贵州', value: 0 },
    { name: '广东', value: 0 },
    { name: '青海', value: 0 },
    { name: '西藏', value: 0 },
    { name: '四川', value: 0 },
    { name: '宁夏', value: 0 },
    { name: '海南', value: 0 },
    { name: '台湾', value: 0 },
    { name: '香港', value: 0 },
    { name: '澳门', value: 0 },
   ]
   // 更改数据
   // 1.遍历所有的省份
   dataList.forEach(item => {
     //2.查找
     const obj = provinceData.find(it => {
       // return 查找条件
       return it.name.includes(item.name)
     })
     // 3.修改value
     if (obj) {
       item.value = obj.value
     }
   })
  let option = {
    title: {
      text: '籍贯分布',
      top: 10,
      left: 10,
      textStyle: {
        fontSize: 16,
      },
    },
    tooltip: {
      trigger: 'item',
      formatter: '{b}: {c} 位学员',
      borderColor: 'transparent',
      backgroundColor: 'rgba(0,0,0,0.5)',
      textStyle: {
        color: '#fff',
      },
    },
    visualMap: {
      min: 0,
      max: 6,
      left: 'left',
      bottom: '20',
      text: ['6', '0'],
      inRange: {
        color: ['#ffffff', '#0075F0'],
      },
      show: true,
      left: 40,
    },
    geo: {
      map: 'china',
      roam: false,
      zoom: 1.0,
      label: {
        normal: {
          show: true,
          fontSize: '10',
          color: 'rgba(0,0,0,0.7)',
        },
      },
      itemStyle: {
        normal: {
          borderColor: 'rgba(0, 0, 0, 0.2)',
          color: '#e0ffff',
        },
        emphasis: {
          areaColor: '#34D39A',
          shadowOffsetX: 0,
          shadowOffsetY: 0,
          shadowBlur: 20,
          borderWidth: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)',
        },
      },
    },
    series: [
      {
        name: '籍贯分布',
        type: 'map',
        geoIndex: 0,
        data: dataList,
      },
    ],
  }
  myEchart.setOption(option)
}

/******************单击按钮，切换小组数据***************************/
// 1. 注册单击事件
// const btns = document.querySelector('#btns')
// btns.addEventListener('click', function (e) {
//   if (e.target.tagName === 'BUTTON') {
//     console.log('单机了组号')
//     // 2. 排他
//     document.querySelector('.btn-blue').classList.remove('btn-blue')
//     e.target.classList.add('btn-blue')
//     // 3. 获取小组的数据
//     const n = e.target.innerHTML
//     console.log(n)
//     // 4. 更改option中的数据
//     // 5. 重新设置配置项
//   }
// })
